<template>
  <div class="c-fc-xblack c-fs24 c-bg-sgray">
    <div class="c-pv30 c-ph24 c-w100 c-br10 c-bg-white c-mb20">
      <div class="c-flex-row c-aligni-start c-p">
        <div class="c-ww180 c-maxh120 c-text-hidden c-p">
          <img :src="$addXossFilter(detail.image, require('../../assets/defult270.png'))" alt="" class="c-w100 imgCloseBig c-br10 c-maxh120">
          <div class="c-pa c-p-t0 c-p-l0 c-ww80 c-hh30 c-lh30 c-fs20 c-fc-white c-br-tl10 c-br-br32 c-pl6" :class="detail.saleCourseType == '体验课' ?'c-bg-experience':'c-bg-formal'">{{detail.saleCourseType=='体验课'?'体验课':'正式课'}}</div>
        </div>
        <div class="c-ml20 c-flex-column c-w0 c-flex-grow1">
          <div class="c-fw400 c-lh36 c-fc-xblack c-text-ellipsis2">{{detail.saleCourseName != null ? detail.saleCourseName : detail.courseName}}</div>
        </div>
      </div>
    </div>
    <div class="c-pv30 c-ph24 c-bg-white c-mt20">
      <div class="c-bd-b1 c-pb30 c-fc-gray">学员信息</div>
      <div class="c-mt30 c-flex-row c-aligni-center">
        <div>学员: {{detail.studentName}} </div>
        <div class="c-ml10 c-fc-white c-br4 c-ph6 c-pv2 c-fs16 c-textAlign-c c-bg-signInStatus">{{detail.isSignIn == 0 ? "未签到" : detail.isSignIn == 1 ? "已上课" : detail.isSignIn == 2 ? "未到" : detail.isSignIn == 3 ? "请假" : ""}}</div>
      </div>
      <div class="c-mt30">上课时间: {{detail.startTime}}</div>
      <div class="c-mt30 c-text-ellipsis1">上课内容: {{detail.courseContent}}</div>
    </div>
    <div class="c-pv30 c-ph24 c-bg-white c-mt20">
      <div class="c-bd-b1 c-pb30 c-fc-gray">预约信息</div>
      <div class="c-mt30">预约人: {{detail.nickName}}</div>
      <div class="c-mt30">预约时间：{{detail.reserveTime}}</div>
      <div class="c-mt30 c-text-ellipsis1" v-if="detail.saleType == 1 && detail.saleCourseType == '正式课' && detail.isSignIn != 3">消耗课时：{{detail.consume}}</div>
    </div>
    <div class="c-pv30 c-ph24 c-bg-white c-mt20" v-if="!!detail.lessonName">
      <div class="c-bd-b1 c-pb30">课节名称</div>
      <div class="c-mt30 c-lh36">{{detail.lessonName}}</div>
    </div>
  </div>
</template>

<script>

import { utilJs } from "@/utils/common";
export default {
  name: 'AppointmentDetail',
  components: {
  },
  props: [],
  beforeCreate() {},
  data() {
    return {
      theme: localStorage.getItem("colorName") || "mb5_default",
      id: "",
      studentId: '',
      saleCourseId: '',
      detail: {},
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {},
  watch: {},
  methods: {
    getDetail() {
      let _this = this;
      utilJs.getMethod(global.apiurl + "educationSystem/reservation/" + this.id + '?studentId=' + this.studentId, res => {
        this.detail = res;
        this.wechatShare();
      }, failRes => {
        Vue.prototype.$showCjToast({
          text: failRes.data != null && failRes.data.msg != null ? failRes.data.msg : "系统错误",
          type: 'warn',
        }).then(() => {
          _this.$routerGo(_this, "push", {
              path: "/edu/faceTeaching"
            });
        });
      })
    },
    wechatShare: function () {
      let title = this.detail.saleCourseName != null ? this.detail.saleCourseName : this.detail.courseName;
      let shareImg = this.detail.image || window.localStorage.getItem("shareLogo");
      let shareUrl = window.location.href.split("#")[0] + '#/edu/appointmentDetail?id=' + this.id + '&studentId=' + this.studentId + '&saleCourseId=' + this.saleCourseId + '&refereeId=' + localStorage.getItem("userId");
      let shareDesc = "点击查看详情";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = this.detail.saleCourseName != null ? this.detail.saleCourseName : this.detail.courseName;
      let shareImg = this.detail.image || window.localStorage.getItem("shareLogo");
      let shareUrl = window.location.href.split("#")[0] + '#/edu/appointmentDetail?id=' + this.id + '&studentId=' + this.studentId + '&saleCourseId=' + this.saleCourseId + '&refereeId=' + localStorage.getItem("userId");
      let shareDesc = "点击查看详情";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
  },
  activated() {
    setDocumentTitle("预约详情");// eslint-disable-line
    this.id = this.$route.query.id;
    this.studentId = this.$route.query.studentId ? this.$route.query.studentId : '';
    this.saleCourseId = this.$route.query.saleCourseId ? this.$route.query.saleCourseId : '';
    this.detail = {};
    this.getDetail();
  },
  deactivated() {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>